import { OrbitControls } from '@react-three/drei'
import { useRef } from 'react'
import { Mesh } from 'three'
import { useFrame } from '@react-three/fiber'

const Expercise = () => {
  const boxRef = useRef<Mesh>(null!)
  useFrame(({ clock }) => {
    boxRef.current.rotation.y = clock.elapsedTime
    console.log(boxRef.current, 'current')
  })
  return (
    <>
      <OrbitControls />
      <ambientLight color="#fff" />
      <mesh position-x={-2} position-y={0.5}>
        <sphereGeometry />
        <meshBasicMaterial color="orange" />
      </mesh>

      <mesh position-y={0.5} position-x={2} ref={boxRef}>
        <boxGeometry />
        <meshBasicMaterial color="mediumpurple" />
      </mesh>
      <mesh rotation-x={-Math.PI / 2} scale={10}>
        <planeGeometry />
        <meshBasicMaterial color="greenyellow" />
      </mesh>
    </>
  )
}

export default Expercise
